import React from 'react'
import { Progress } from '@/components/ui/progress'

export default function Loading() {
    const [progress, setProgress] = React.useState(0)
    const [loadingText, setLoadingText] = React.useState('Loading')

    React.useEffect(() => {
        // 设置进度条的递增
        const interval = setInterval(() => {
            setProgress(prev => {
                if (prev >= 100) {
                    clearInterval(interval)
                    return 100
                }
                return Math.min(prev + 10, 100)
            })
        }, 500)

        // 设置loading文本的递增点
        const textInterval = setInterval(() => {
            setLoadingText(prev => {
                if (prev.length >= 10) {
                    return 'Loading' // Reset to 'Loading' after 3 dots
                }
                return prev + '.'
            })
        }, 500)

        // 清理函数以清除定时器
        return () => {
            clearInterval(interval)
            clearInterval(textInterval)
        }
    }, [])

    return (
        <div className='flex flex-col items-center justify-center h-screen'>
            <Progress value={progress} className='w-[60%] mx-auto' />
            <p className='mt-4 text-lg'>{loadingText}</p> {/* 显示loading文本 */}
        </div>
    )
}